import React, { Component } from 'react'
import Add from './add'
import List from './list'
import Home from './home'
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom'

import './app.css'
// imrd
class Myapp extends Component {
  render() {
    return (
      // <Router>
        <div>
          <NavLink to='/'  >首页 </NavLink> &nbsp;&nbsp;
          <NavLink to='/add'   className={({ isActive }) => isActive ? "red" : ""} >add</NavLink>  &nbsp;&nbsp;
          <NavLink to='/list' className={({ isActive }) => isActive ? "red" : ""}  >list
          
          </NavLink>  &nbsp;&nbsp;
          <Routes>
          <Route path='/'  element={<Home></Home>}></Route>
          <Route path='/add'   element={<Add></Add>}></Route>
          {/* react-router-dom v6嵌套路由需要在path最后加”/*”*/}
          <Route path='/list/*' element={<List />}> </Route>
          </Routes>
        </div>
      // </Router>
    )
  }
}
export default Myapp
